<template>
  <div class="view">
    <Panel :title="title">
      <p> <el-row gutter="20">
    <el-col :span="17"><div class="grid-content bg-purple" />
   <el-form ref="form" :model="form" label-width="80px" label-position="top" >
  <el-form-item label="课程名称" prop="name" 
  
  :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]">
    <el-input v-model="name"></el-input>
  </el-form-item>
  </el-form>
    </el-col>
    <el-col :span="7"><div class="grid-content bg-purple-light" />
    <el-form ref="form" :model="form" label-width="80px" label-position="top" >
  <el-form-item label="状态">
   <el-switch
  v-model="value"
  active-color="#13ce66"
  inactive-color="#ff4949">
</el-switch>
  </el-form-item>
  </el-form>
    </el-col>
  </el-row>
  <el-row>
  <el-col :span="24"><div class="grid-content bg-purple">
     <el-form ref="form" :model="form" label-width="80px" label-position="top" >
  <el-form-item label="课程简介" 
  :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]"
  >
   <Simditor></Simditor>
  </el-form-item>
  </el-form>

    </div></el-col>
</el-row>
<el-row>
  <el-col :span="24"><div class="grid-content bg-purple">
     <el-form :rules="rules" ref="form" :model="form" label-width="80px" label-position="top" >
  <el-form-item label="内容概览"  prop="name" :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]">
   <Simditor></Simditor>
  </el-form-item>
  </el-form>

    </div></el-col>
</el-row>
<el-row>
  <el-col :span="24"><div class="grid-content bg-purple">
     <el-form :rules="rules" ref="form" :model="form" label-width="80px" label-position="top" >
  <el-form-item label="参考资料"  prop="name"
  :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]">
   <Simditor></Simditor>
  </el-form-item>
  </el-form>

    </div></el-col>
</el-row>
  </p>
    </Panel>
  </div>
</template>

<script>
import api from '../../api.js'
// Simditor是写好的编辑栏组件，我们可以直接引入使用
import Simditor from '../../components/Simditor.vue'

export default {
  name: 'CreateCourse',
  components: { Simditor },
  data () {
    return {
      value: true,
      title: '添加课程',
      course: {
        name: '',
        description: '',
        goal: '',
        content: '',
        references: '',
        visible: false
      }
    }
  },
  mounted () {
    if (this.$route.name === 'edit-course') {
      this.title = '编辑课程'
      api.getCourse(this.$route.params.courseId).then(res => {
        this.course = res.data.data
      }).catch(() => {
      })
    }
  },
  methods: {
    saveCourse () {
      let funcName = this.$route.name === 'edit-course' ? 'editCourse' : 'createCourse'
      let data = Object.assign({}, this.course)
      api[funcName](data).then(res => {
        this.$router.push({name: 'course-list', query: {refresh: 'true'}})
      }).catch((e) => {
      })
    }
  }
}
</script>
